import React, { Component } from 'react';
import Avatar from 'material-ui/Avatar';
import Divider from 'material-ui/Divider';
import FontIcon from 'material-ui/FontIcon';

import { moment } from '../Utils/Helper';

export default class name extends Component {
  render() {
    const { item, userId } = this.props;

  	let isCurrentUser = false;

  	if (item.user_id == userId) {
  	  isCurrentUser = true;
  	}
    
  	let styles = {
      box: {
        position: 'relative',
        overflow: 'hidden',
        width: '100%',
        marginTop: 6,
        marginBottom: 6,
        paddingTop: 6,
        paddingBottom: 6,
        fontSize: 14
      },
      content: {
        position: 'relative',
        lineHeight: 1.428,
        marginLeft: 12,
        marginRight: 12,
        maxWidth: '65%',
        padding: 12,
        color: isCurrentUser ? '#fff' : 'rgba(0, 0, 0, 0.87)',
        borderRadius: 2,
        backgroundColor: isCurrentUser ? '#00BCD4' : '#EEEEEE',
      },
      time: {
        padding: 24,
        fontSize: 12,
        textAlign: 'center'
      },
      name: {
        fontSize: 12,
        marginRight: 12,
        marginLeft: 12
      }
    };

  	return (
  	  <div style={styles.box}>
        {this.props.createdAt ? 
          <div style={styles.time}>{this.props.createdAt}</div> : ''
        }
        <Avatar 
          src={item.user_img}
          className={isCurrentUser ? 'pull-right' : 'pull-left'}
        />
        <div
          className={isCurrentUser ? 'pull-right' : 'pull-left'}
          style={{textAlign: isCurrentUser ? 'right' : 'left'}}
        >
          <span style={styles.name}>{item.user_name}</span>
          <div 
            style={styles.content} 
            className={isCurrentUser ? 'chat-content' : 'chat-content-normal'}
          >
            {item.comment}<br/>
          </div>
        </div>
	    </div>
  	);
  }
};
